<template>
  <div>
    <!-- 输入栏和按钮 -->
    <div style=" line-height: 40px;margin-bottom: 4px;height: 40px;">

      <el-input style="width: 200px; float: left;margin-left: 5px; width: 140px;" placeholder="请输入买家ID"
        v-model.trim="uid" @keyup.enter.native="loadOrder(); messageAlert()" suffix-icon="el-icon-search"
        maxlength="20">
      </el-input>

      <el-input style="width: 200px; float: left;margin-left: 5px; width: 160px;" placeholder="请输入买家姓名"
        v-model.trim="realName" @keyup.enter.native="loadOrder(); messageAlert()" suffix-icon="el-icon-search"
        maxlength="32">
      </el-input>

      <el-input style="width: 200px; float: left;margin-left: 5px; width: 140px;" placeholder="请输入订单ID"
        v-model.trim="id" @keyup.enter.native="loadOrder(); messageAlert()" suffix-icon="el-icon-search" maxlength="20">
      </el-input>

      <!-- 一系列按钮 -->

      <el-date-picker style="margin-left: 5px;float: left; width: 370px;" v-model="value2" type="datetimerange"
        :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        align="right">
      </el-date-picker>

      <el-input style="width: 200px; float: left;margin-left: 5px; width: 100px;" placeholder="最小价"
        v-model.trim="priceMin" suffix-icon="el-icon-search" maxlength="6">
      </el-input> &nbsp;—

      <el-input style="width: 200px;   margin-left: 5px; width: 100px;" placeholder="最大价" v-model.trim="priceMax"
        suffix-icon="el-icon-search" maxlength="6">
      </el-input>

      <el-button type="primary" style="  margin-left: 5px;" @click="loadOrder(); messageAlert()">搜索
      </el-button>
      <el-button type="warning" style=" margin-left: 7px;"
        @click="orderNameKey = '',value2='',priceMin='',priceMax='',id='',uid='',realName=''">重置
      </el-button>

      <!-- <el-button style="float: right; margin-left: 20px;" type="danger" @click="batchDeleteOrder()">批量删除<i class="el-icon-delete"
                          style="padding-left: 5px;"></i></el-button> -->


      <el-popconfirm title="确定删除该商品吗？" icon-color="red" @confirm="batchDeleteOrder"
        style="float: right;  margin-left: 5px;  width: 80px; margin-top:-2px; ">
        <el-button slot="reference" type="danger">批量删除</el-button>
      </el-popconfirm>
      <!--  -->
      <el-button style="float: right; margin-left: 5px; width: 80px;" type="primary"
        @click="dialogFormVisible = true; form.flag = '0'">
        新增<i class="el-icon-circle-plus-outline" style="padding-left: 5px;"></i></el-button>
      <!--点击新增跳出来的表单被修改按钮也使用  -->
    </div>



    <div style="height: 90%;padding-top: 0px;padding-bottom: 5px;margin-top: 10px;">
      <!-- 表格 -->
      <el-table :data="tableData" border stripe :header-cell-class-name="headerStyle"
        @selection-change="handSelectChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="orderId" label="订单号" width="280"></el-table-column>
        <el-table-column prop="realName" label="用户姓名" width="100"></el-table-column>
        <el-table-column prop="userPhone" label="用户电话" width="100"></el-table-column>
        <el-table-column prop="totalPrice" label="订单总价" width="100"></el-table-column>
        <el-table-column prop="payPrice" label="实际支付金额" width="100"></el-table-column>
        <el-table-column prop="payPostage" label="支付邮费" width="100"></el-table-column>
        <el-table-column prop="status" :formatter="statusFormat" label="订单状态" width="100"></el-table-column>
        <el-table-column prop="refundStatus" :formatter="refusalFormat" label="是否退款" width="80"></el-table-column>
        <el-table-column prop="cost" label="成本价" width="100"></el-table-column>
        <el-table-column prop="createTime" :formatter="timeFormat" label="创建时间" width="180"></el-table-column>
        <el-table-column label="操作">

          <!--slot-scope="scope"一个添加条件 叫做插槽;  -->
          <template slot-scope="scope">
            <el-button type="text">编辑
            </el-button>
            <!-- 删除按钮，弹出框提醒 Popconfirm 气泡确认框，Popover 弹出框不成功-->
            <el-popconfirm title="确定删除该用户吗？" icon-color="red" @confirm="deleteOrder(scope.row.id)">
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>
    </div>

    <div class="block" style="padding: 5px;margin-bottom: -10px;padding-left: 380px;">
      <span class="demonstration"></span>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[5, 8, 12, 15]" :page-size="8" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  import myUpload from 'vue-image-crop-upload/upload-2.vue'

  export default {
    name: 'Order',
    data() {
      return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        tableData: [], //页面数据
        total: 0, //页面大小
        pageNum: 1, //页码
        pageSize: 8, //页大小

        //关键字查询
        id: '',
        uid: '',
        realName: '',
        priceMin: '',
        priceMax: '',

        //表格加载图片
        loading: true,

        tableRowClassName: 'tableRowClassName',

        // 弹出框提醒
        visible: false,

        // 新增表单信息
        dialogFormVisible: false,

        formImageUrl: '',
        formLabelWidth: '200px',

        // 多选情况
        multipleSelection: [],

        headers: {
          'Authorization': JSON.parse(localStorage.getItem('token')),
        },
        // 日期选择
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: ''

      }
    },
    components: {
      myUpload
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        this.loadOrder();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.loadOrder();
      },
      headerStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        return 'tableStyle'
      },
      //获得后台orders数据
      loadOrder() {
        // 获得数据之前加载加载页面
        const that = this;
        that.loading = true;
        this.$axios.get('/storeOrder/page', {
            params: {
              pageNum: that.pageNum,
              pageSize: that.pageSize,
              id: that.id,
              uid: that.uid,
              realName: that.realName,
              startTime: that.value2[0],
              endTime: that.value2[1],
              MinPayPrice: that.priceMin,
              MaxPayPrice: that.priceMax,
            }
          })
          .then(function (response) {
            //获得数据之后取消加载页面 
            that.tableData = response.data.records;
            that.total = response.data.total;
          })
          .catch(function (error) {
            console.log(error);
          })
      },
      // 消息提醒方法
      messageAlert() {
        this.$message({
          message: '查询成功！',
          type: 'success',
          duration: 1600
        });
      },
      messageAlert2() {
        this.$message({
          message: '提交成功',
          type: 'success',
          duration: 1600
        });
      },
      messageAlert3() {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1600
        });
      },

      //多选处理
      handSelectChange(val) {
        // 把选择的数字赋值data
        this.multipleSelection = val;
      },

      // 批量删除处理
      batchDeleteOrder() {
        let ids = this.multipleSelection.map(v => Number.parseInt(v.id));
        const that = this;
        // delet只可以传递一个值，不可以传递对象数组
        this.$axios.post('/storeOrder/del/batch', {
            ids: ids
          })
          .then(function (response) {
            that.loadOrder();
            that.messageAlert3();
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
      },
      //提交表单


      // 删除用户
      deleteOrder(id) {
        // 获得数据之前加载加载页面
        const that = this;
        that.loading = true;
        this.$axios.delete('/storeOrder/' + id)
          .then(function (response) {
            that.loadOrder();
            that.messageAlert3();
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
      },

      statusFormat(row, column) {
        if (row.status === -2) {
          return "退货成功"
        } else if (row.status === -1) {
          return "申请退款"
        } else if (row.status === 0) {
          return "待发货"
        } else if (row.status === 1) {
          return "待收货"
        } else if (row.status === 2) {
          return "已收货"
        } else if (row.status === 3) {
          return "已完成"
        }
      },

      refusalFormat(row, column) {
        if (row.status === 0) {
          return "未退款"
        } else if (row.status === 1) {
          return "申请中"
        } else {
          return "已退款"
        }
      },

      timeFormat(row, column) {
        var date = new Date(row.createTime);
        var year = date.getFullYear(),
          month = date.getMonth() + 1, //月份是从0开始的
          day = date.getDate(),
          hour = date.getHours(),
          min = date.getMinutes(),
          sec = date.getSeconds();
        var newTime = year + '-' +
          month + '-' +
          day + ' ' +
          hour + ':' +
          min + ':' +
          sec;
        return newTime;
      }
    },


    created() {
      this.loadOrder();
    },
  }

</script>

<style>
  .tableStyle {
    background-color: rgb(236, 236, 236) !important;
    color: rgb(0, 0, 0);
    font-weight: 500;
    font-size: medium;
  }
